<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx中直接插入数组</title>
	<style>
		*{
			padding:0;
			margin: 0;
			box-sizing:border-box;
		}
		.list{
			max-width: 768px;
			min-width: 320px;	
			list-style: none;
			margin: 40px auto;
			border:1px solid #EEE;
		}
		.list>li{
			color:#333;
			padding:10px;
			background:lightgreen;
			margin:10px 0;
		}
	</style>
</head>
<body>

<div id="container">

</div>
	
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">
	var bat=[
	<li key='0'>北京百度网讯信息科技有限公司</li>,
	<li key='1'>深圳腾讯计算机技术有限公司</li>,
	<li key='2'>杭州阿里巴巴集团</li>
	];

	var arr=[
		{
			name:"jack ma",
			motto:"这辈子做的最错的事就是创建阿里巴巴"
		},{
			name:"pony ma",
			motto:"我出生在一个普通家庭"
		},{
			name:"robin li",
			motto:"知识改变命运，科技创造未来"
		}
	];

	var a=10,b=20; 

	var html=<div>
			<ul className="list">
				{bat}
			</ul> 

			<ul className="list">
				{arr.map(function(item,index){
					return <li key={index}>{item.name}-{item.motto}</li>
				})}
			</ul>
			<ul className="list">
				<li>{a>b?'a大于b':'a小于b'}</li>
				<li>{1024/2}</li>
				<li>{'www.itheima.com'.substring(4,11)}</li>
			</ul>
	</div>
	ReactDOM.render(
		html,
		document.querySelector('#container')
	);
</script>
</html>